<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>楼宇管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all"/>
</head>
<body style="margin: 50px">


<div class="layui-input-inline">

    <form class="layui-form" method="post">
        <div class="layui-input-inline">
            <div class="layui-form-item">
                <select name="buildinginfo" id="buildinginfo" >
                    <option value=""> 请选择 </option>
                </select>
            </div>
        </div>
        <div class="layui-input-inline">
            <div class="layui-form-item">
                <input type="text" id="name" name="name" lay-verify="name" autocomplete="off"
                       class="layui-input"
                       placeholder="楼宇名">
            </div>
        </div>
        <div class="layui-input-inline">
            <div class="layui-form-item">
                <button type="button" class="layui-btn" id="push" >提交</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
            </div>
        </div>
    </form>

</div>
<table class="layui-hide" id="test" lay-filter="users"></table>
</body>


<script type="text/javascript" src="../assets/layui/layui.js"></script>
<script type="text/javascript" src="../assets/jquery.min.js"></script>
<script type="text/javascript" src="../assets/bootstrap-3.3.7/js/bootstrap.js"></script>
<script type="text/html" id="bar">
    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="use" lay-event="use">启用</utton>
</script>
<script>
    var buildinginfo = document.getElementById("buildinginfo")
    $.ajax({
        type: "post",
        contentType: "application/x-www-form-urlencoded",
        url: "/api/v1/plot/showbuilding",
        data: {},
        async: false,
        dataType: "json",
        success: function (data) {
            if (data.resultTypeEnum == 200) {
                rolelist = data.message;
                rolelist.forEach(function (item, index) {
                    buildinginfo.options.add(new Option(item.name, item.fid));
                })
            } else {
                layer.msg(data.message, {icon: 5})
            }
        }
    });




    showtable()
    function showtable(name,unumber,classid,majorid) {
        var table
        layui.use(['form', 'table', 'layer', 'laydate'], function () {
            var form = layui.form
            table = layui.table;


            $("#push").click(function () {
                var name = $("#name").val()
                var fid =  $("#buildinginfo").val()
                console.log(fid)

                showtable(name,fid)
            })

            $("#reset").click(function () {
                $("#name").val("")
                showtable()
            })

            // 获取数据
            showtable()

            function showtable(name,fid) {

                table.render({
                    elem: '#test'
                    , url: '/api/v1/plot/show'
                    , toolbar: true
                    , title: '楼宇'
                    , totalRow: true
                    , cols: [[
                        {field: 'id', title: 'ID', fixed: 'left', unresize: true, sort: true}
                        , {field: 'name', title: '楼宇名', edit: 'major', sort: true}
                        , {field: 'father', title: '上级部门', edit: 'text', sort: true}
                        , {field: '', title: '操作', toolbar: "#bar"}

                    ]]
                    , page: true
                    , response: {
                        statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                    }
                    , where: {
                        "name": name,
                        "isdel":'1',
                        "fid":fid
                    }


                });
            }

            table.on('tool(users)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                switch (layEvent) {
                    case 'use':
                        var delIndex = layer.confirm('真的启用id为' + data.id + "的班级信息吗?", function(delIndex) {
                            $.ajax({
                                url: '/api/v1/plot/use?id='+data.id,
                                type: "post",
                                success: function(suc) {
                                    if(suc.resultTypeEnum == 200) {
                                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                        layer.close(delIndex);
                                        console.log(delIndex);
                                        layer.msg("启用成功", {
                                            icon: 1
                                        });
                                    } else {
                                        layer.msg(data.message, {
                                            icon: 5
                                        });
                                    }
                                }
                            });
                            layer.close(delIndex);
                        });

                        break


                }

            });


        });
    }


</script>


</body>
</html>